<template>
  <div class="hello">
    <form ref="outForm">
      <Form
        ref="form"
        :validOnChange="true"
        :showErrorTip="false"
        labelPosition="left"
        :rules="validationRules"
        :model="model"
      >
        <FormItem label="文件" prop="file" icon="h-icon-file">
          <input type="file" ref="inputFile" accept="application/zip" />
        </FormItem>
        <FormItem>
          <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
    </form>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      // 是否正在加载
      isLoading: false,
      // 验证规则
      validationRules: {
        required: ["file"]
      },
      model: {
        file: null
      }
    };
  },
  methods: {
    submit() {
      //文件输入框，不能直接使用v-model，而是要动手把文件赋予给模型中的相应属性
      this.model.file = this.$refs.inputFile.files[0];

      // 模型中的属性值满足要求以后，才能验证通过
      let valid = this.$refs.form.valid();

      // 如果结果是有效的
      if (valid.result) {
        this.isLoading = true;
        // 上传文件
        let data = new FormData();
        data.append("file", this.model.file);

        Axios.post("/api/jdk-api/Upload", data)
        //  Axios.post("/api/document-uploader/upload", data)
          .then(Response => {
            this.isLoading = false;
          })
          .catch(error => {
            this.isLoading = false;
          });
      }
    },
    reset() {
      // 重置以选择的文件
      this.model.file = null;
      // 重置HeyUI的表单验证
      this.$refs.form.resetValid();
      // 重置HTML表单的输入内容
      this.$refs.outForm.reset();
    }
  }
};
</script>